<template>
  <div class="home">
     <my-header v-model="title" @enter="addTask">
        <h1>TODOLIST</h1>
     </my-header>
      <!-- <my-header :value="title" @input="changeInput">
        <h1>TODOLIST</h1>
     </my-header> -->
     <!-- 全部任务 -->
     <my-list :list="allList">
        <h1>全部任务{{allList.length}} </h1>
     </my-list>
     <!-- 未完成的任务 -->
      <my-list :list="doing">
        <h1>未完成的任务{{doing.length}} </h1>
     </my-list>
     <!-- 已经完成的任务 -->
      <my-list :list="done">
        <h1>已经完成的任务{{done.length}} </h1>
     </my-list>

     
  </div>
</template>

<script>
// @ is an alias to /src
import myHeader from '../components/myHeader'
import myList from '../components/myList'
export default {
  data() {
    return {
        title:''
    }
  },
  methods: {
    // changeInput(val){

    //     this.title = val

    // }
    addTask(){
        this.$store.commit('add',this.title)
        // 清空title
        this.title = ''

    }
  },
  computed:{
    // 全部的
    allList(){
        return this.$store.state.list
    },
    // 未完成的任务  状态是false
    doing(){
        return this.$store.state.list.filter(item=>!item.status)
    },
    // 已经完成的
      done(){
        return this.$store.state.list.filter(item=>item.status)
    },

  },
  components: {
    myHeader,
    myList
  }
}
</script>
